 <template>
  <div class="bg_page">
    <header-bar :type="99" @search="search" :interceptReturn="true" @return="closeWebPage"></header-bar>
    
    <pull-refresh :bottom="panelBottom" ref="pullRefreshPanel" id="scrollPanel" :background-color="'#f6f6f6'" :top="headerHeight" :enableRefresh="true" @refresh="refreshData">
      <div class="inner_panel">
        <goods-list :list="goodsListData"></goods-list>

        <div class="no_data_block" v-if="goodsListData.length == 0 && !isLoading">
          <no-data-panel :tipsData="tipsData"></no-data-panel>
        </div>

        <div>
          <infinite-load v-if="goodsListData.length > 0" :scroll-target="scrollTarget" :is-loading="isLoading" :tipsShow="tipsShow" :is-nomore="isNomre" @load="getNextData"></infinite-load>
        </div>
      </div>

    </pull-refresh>
  </div>
</template>

<script>
import HeaderBar from "@/components/header.vue"
import PullRefresh from "@/components/pullRefresh.vue";
import infiniteLoad from '@/components/infiniteLoad.vue';
import goodsList from '@/views/common/goodsList/goodsList.vue';
import {mapState,mapActions} from 'vuex';
import native from '@/libs/native/index';
export default {
  props: {
   
  },

  components:{
    HeaderBar,
    PullRefresh,
    infiniteLoad,
    goodsList
  },
 
  data() {
    return {
      panelBottom:0,
      scrollTarget: '#scrollPanel',
      isLoading: false,
      isNomre: false,
      tipsShow: true,
      goodsListData:[],
      keyword:'',
      currentPage:1
    }
  },
  computed:{
    ...mapState({
      headerHeight: state => state.headerHeight,
    }),
    tipsData(){
      if(!this.keyword){
        return {
          img:require('@/assets/imgs/common/no_search_result.png'),
          text:'请输入要搜索的关键词'
        }
      };
      return {
        img:require('@/assets/imgs/common/no_search_result.png'),
        text:'抱歉，没有找到与“' + this.keyword +'”相关的商品',
        subText:'换个关键词试试吧'
      }
    }
  },
  created() {
    this.keyword = this.$route.query.keyword || '';
    this.getAppGoodsList();
  },
  filters:{},
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    getAppGoodsList(done){
      if(!this.keyword){
        this.showMsg({content:'请输入搜索关键词'});
        return;
      }
      if(!done && this.currentPage == 1){
        this.toggleLoading({flag:true});
        this.isLoading = true;
      }
      this.$ajax.getAppGoodsList({
        queryBody:{
           title: this.keyword
        },
        page:{
          size:10,
          current:this.currentPage
        }
      }).then((res)=>{
        this.toggleLoading({flag:false});
        if(this.isLoading){
          this.isLoading = false;
        };
        if(res.code == '0000'){
          if(!this.tipsShow){
            this.tipsShow = true;
          };

          if(res.data.records.length < 10){
            this.isNomre = true;
          };

          if(done){
            done();
          };
          if(this.currentPage == 1){
            this.goodsListData = res.data.records;
          }else{
            this.goodsListData = [...this.goodsListData,...res.data.records];
          }
        }
      });
    },
    refreshData(done){
      this.isLoading = false;
      this.isNomre =  false;
      this.tipsShow = false;
      this.currentPage = 1;
      this.getAppGoodsList(done)
    },
    getNextData(){
      this.isLoading = true;
      this.currentPage++;
      this.getAppGoodsList()
    },
    search(keyword){
      this.isLoading = false;
      this.isNomre =  false;
      this.tipsShow = false;
      this.currentPage = 1;
      this.keyword = keyword;
      this.getAppGoodsList()
    },
    closeWebPage(){
      native.closeWebPage();
    }
  }
}
</script>

<style lang="less" scoped>
.bg_page{
  min-height: 100%;
}
.inner_panel{
   width: 100%;
   padding: 0.2rem;
   padding-right: 0;
}
.no_data_block{
  padding-top: 1.8rem;
}
</style>
